<template>
    <div class="box">
        <div class="header">
            <img @click="router.back()" src="@/assets/img/Order/icon_arrow_left_black.png" alt="">
            我的订单
        </div>
        <div class="nav">
            <li><span @click="activeStatus = 'all'" :class="{ active: activeStatus === 'all' }">全部</span></li>
            <li><span @click="activeStatus = 'unpay'" :class="{ active: activeStatus === 'unpay' }">代付款</span></li>
            <li><span @click="activeStatus = 'pay'" :class="{ active: activeStatus === 'pay' }">待收货</span></li>
            <li><span @click="activeStatus = 'refund'" :class="{ active: activeStatus === 'refund' }">退款订单</span></li>
            <li><span @click="activeStatus = 'receipt'" :class="{ active: activeStatus === 'receipt' }">已收货</span></li>
        </div>
        <div class="container">
            <ul class="list" v-if="activeStatus === 'all'">
                <li style="text-align:center;" v-show="Order.allList.length === 0" v-text="'暂无相关内容~'"></li>
                <li v-for="item in Order.allList" :key="item.orderId">
                    <p class="title" v-text="item.pay ? '已付款' : '未付款'"></p>
                    <div class="item" v-for="item2 in item.details" :key="item2.id">
                        <img :src="item2.avatar" alt="">
                        <p>{{ item2.name }}</p>
                        <div>
                            <span>{{ `￥${item2.price}` }}</span>
                            <span>{{`x ${item2.count}`}}</span>
                        </div>
                    </div>
                    <p class="end">共计{{ getTotal(item.details) }}件商品，总金额<span style="padding-left: 5px;">￥</span>{{
                        item.account
                    }}<span>.00</span></p>
                    <div class="btn-list unpay-list " v-show="!item.pay">
                        <button class="edit-address" style="backgroundColor:#fff">修改地址</button>
                        <button class="pay" @click="payHandler(item.orderId)">去支付</button>
                    </div>
                    <div class="btn-list" v-show="item.pay">
                        <span class="romve-order" @click="removeHandler(item.orderId)">删除订单</span>
                        <button class="pay">再次购买</button>
                    </div>
                </li>
            </ul>
            <ul class="list" v-else-if="activeStatus === 'unpay'">
                <li style="text-align:center;" v-show="Order.unpayList.length === 0" v-text="'暂无相关内容~'"></li>
                <li v-for="item in Order.unpayList" :key="item.orderId">
                    <p class="title" v-text="item.pay ? '已付款' : '未付款'"></p>
                    <div class="item" v-for="item2 in item.details" :key="item2.id">
                        <img :src="item2.avatar" alt="">
                        <p>{{ item2.name }}</p>
                        <div>
                            <span>{{ `￥${item2.price}` }}</span>
                            <span>{{`x ${item2.count}`}}</span>
                        </div>
                    </div>
                    <p class="end">共计{{ getTotal(item.details) }}件商品，总金额<span style="padding-left: 5px;">￥</span>{{
                        item.account
                    }}<span>.00</span></p>
                    <div class="btn-list unpay-list">
                        <button class="edit-address" style="backgroundColor:#fff">修改地址</button>
                        <button class="pay" @click="payHandler(item.orderId)">去支付</button>
                    </div>
                </li>
            </ul>
            <ul class="list" v-else-if="activeStatus === 'pay'">
                <li style="text-align:center;" v-show="Order.payList.length === 0" v-text="'暂无相关内容~'"></li>
                <li v-for="item in Order.payList" :key="item.orderId">
                    <p class="title" v-text="item.pay ? '已付款' : '未付款'"></p>
                    <div class="item" v-for="item2 in item.details" :key="item2.id">
                        <img :src="item2.avatar" alt="">
                        <p>{{ item2.name }}</p>
                        <div>
                            <span>{{ `￥${item2.price}` }}</span>
                            <span>{{`x ${item2.count}`}}</span>
                        </div>
                    </div>
                    <p class="end">共计{{ getTotal(item.details) }}件商品，总金额<span style="padding-left: 5px;">￥</span>{{
                        item.account
                    }}<span>.00</span></p>
                    <div class="btn-list">
                        <span class="romve-order" @click="removeHandler(item.orderId)">删除订单</span>
                        <button class="pay">再次购买</button>
                    </div>
                </li>
            </ul>
            <p v-else style="text-align: center;">暂无相关内容~</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useOrder } from '@/store'
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router';


const router = useRouter()
const { proxy }: any = getCurrentInstance()
const Order = useOrder()
//activeStatus all/pay/unpay/refund/receipt
const activeStatus = ref<string>('all')



onMounted(() => {
    Order.init()
})
//总数函数
const getTotal = (list: Vm.Cart[]) => {
    const total = list.reduce((total: number, item: Vm.Cart) => {
        total += item.count
        return total
    }, 0)
    return total
}

// 删除订单
const removeHandler = async (id: string) => {
    await proxy.$miConfirm({ isDefault: true, text: '确定要删除嘛', title: '提示' })
    Order.remove(id)
}

const payHandler = (id: string) => {
    router.push({ name: 'ConfirmOrder', params: { id: id } })
}

</script>
<style lang="stylus" scoped>
.box
    display flex
    width 100vw
    height 100vh
    flex-direction column
    background-color: rgb(244, 244, 244);
    
.header
    height 44px
    display flex
    justify-content center
    align-items center
    flex-shrink 0
    position relative

.header img
    position absolute
    top 0
    left 11px
    width 39px
    height 48px

.nav
    height 40px
    display flex
    justify-content space-evenly
    align-items center
    flex-shrink 0

.nav span
    padding 0 10px
    font-size: 13px
    color: rgb(102, 102, 102);
    line-height 22px
    border-radius: 11px;

.nav span.active
    background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
    color #fff
.container
    padding 0 10px 10px
    overflow auto

.container::-webkit-scrollbar
    width 0

.list
    display flex
    flex-direction column

.list li
    display flex
    border-radius: 10px;
    background-color #fff
    flex-direction column
    margin-bottom 10px

.title
    height 44px
    line-height 44px
    color: rgb(191, 17, 17);
    font-size: 14px;
    align-self flex-end 
    padding-right 10px

.item
    padding 12px 10px
    display flex
    
.item img
    height 90px
    width 90px

.item p:nth-child(2)
    flex-grow 1
    margin-left: 10px;
    color: rgb(51, 51, 51);
    font-size: 15px;

.item div:last-child
    display flex
    flex-direction column
    padding-left: 6px;
    color: rgb(153, 153, 153);
    font-size: 13px;
    text-align right

.end
    padding: 10px;
    color: rgb(51, 51, 51);
    font-size 12px
    text-align right
.btn-list
    height 48px
    display flex
    padding 0 10px
    justify-content space-between
    align-items center

.edit-address
    border-color: rgb(102, 102, 102);
    border-radius: 14px;
    border-width: 1px;
    height: 28px;
    margin-right: 10px;
    width: 76px;
    color: rgb(102, 102, 102);

.pay
    background-color: rgb(191, 17, 17);
    border-color: rgb(191, 17, 17);
    border-radius: 14px;
    border-width: 1px;
    height: 28px;
    width: 76px;
    color #fff

.romve-order
    color: rgb(153, 153, 153);
    font-size: 14px;

.unpay-list
    justify-content flex-end !important;
</style>